<template>
  <VueJsonPretty v-model:data="value"
    show-line-number
    show-icon
    editable
    :node-selectable="() => true"
    selectableType="multiple"
    class="w-[calc(100%-12px)]"
  />
</template>
<script lang="ts" setup>
  import { ref, watch, watchEffect } from 'vue';
  import VueJsonPretty from 'vue-json-pretty'
  import 'vue-json-pretty/lib/styles.css'

  const props = defineProps<{modelValue: any}>()
  const emits = defineEmits(['update:modelValue'])

  const value = ref(props.modelValue)

  watchEffect(() => emits('update:modelValue', value.value))
  watch(() => props.modelValue, (val) => value.value = val)
</script>